<template>
  <div class="search-suggestion">
    <van-cell v-for="(val,index) in list.options" :key="index" icon="search">
      <span slot="title" v-html="htmlStr(val)"></span>
    </van-cell>
  </div>
</template>

<script>
import { debounce } from 'lodash'
import { getSearchSuggestions } from '@/api/user.js'
export default {
  name: 'SearchSuggestion',
  components: {},
  props: {
    searchText: {
      type: String,
      require: true
    }
  },
  data () {
    return {
      list: []
    }
  },
  filters: {

  },
  computed: {},
  watch: {
    searchText: {
      // 监视的处理函数
      handler: debounce(async function (val) {
        const { data: { data: a } } = await getSearchSuggestions({ q: val })
        this.list = a
      }, 300),
      // 首次监视触发
      immediate: true
    }
  },
  created () { },
  mounted () {

  },
  methods: {
    htmlStr (val) {
      const reg = new RegExp(this.searchText)

      return val.replace(reg, '<span style="color:red">' + this.searchText + '</span>')
    }
  }
}
</script>

<style scoped lang="less"></style>
